import React, { Component } from 'react';
import autoBind from 'react-autobind';
import { Link, browserHistory } from 'dva/router';
import { NavBar } from 'antd-mobile';

// style
import styles from './index.css';
import IconfontStyle from '../../../assets/iconfont/iconfont.css';

// widget 
import RightSidebar from '../../Shop/ShopBody/right-sidebar';

class ProductionNav extends Component {
	constructor(props) {
        super(props)
        autoBind(this)

        this.state = {
        	isShowFilter: false
        }
    }
    componentWillReceiveProps(nextProps) {
    	if(nextProps.meyley.productionDetail != this.props.meyley.productionDetail) {
    		const { dispatch, params } = nextProps

    		dispatch({
	    		type: 'goods/getBrandDetail',
	    		payload: {
	    			brandId: nextProps.meyley.productionDetail && nextProps.meyley.productionDetail.brandId
	    		}
	    	})
    	}
    }
    onSearch(keywords) {
        const { dispatch, params, meyley } = this.props

        let brandId = meyley.productionDetail && meyley.productionDetail.brandId

        browserHistory.push(`/shop/${brandId}?keywords=${keywords}`)
    }

    onClickBack() {
    	const { leftPath } = this.props

    	if(leftPath) {
    		browserHistory.push(leftPath)
    	} else {
    		browserHistory.goBack()
    	}
    }
    onNavBrand() {
        const { dispatch, params, meyley } = this.props
        let brandId = meyley.productionDetail && meyley.productionDetail.brandId

        browserHistory.push(`/shop/${brandId}`)   
    }
	render() {
		const { meyley, goods } = this.props
	 	return (
	 		<div className="production-nav">
	 			<NavBar mode="dark"
	 				iconName={null}
	 				leftContent={[<i key={0} onClick={this.onClickBack} className={`${IconfontStyle['meyley-icon']} ${IconfontStyle['meyley-icon-left-arrow']}`} style={{fontSize: '0.4rem', color: 'rgb(66, 62, 62)', position: 'relative', bottom: 4}}/>]} 
			      	rightContent={[<img key={0} onClick={() => this.setState({isShowFilter: true})} style={{width: '0.40rem', marginRight: '0.12rem'}} src={require('../../../assets/icon/dot-dark.png')} />]}
			    >
			    	<span onClick={this.onNavBrand}>
                        <img style={{width: '0.4rem', height: '0.4rem', marginRight: '0.16rem', verticalAlign: 'middle'}} src={goods.brandDetail && goods.brandDetail.brandLogo} />
                        {meyley.productionDetail && meyley.productionDetail.englishName} {meyley.productionDetail && meyley.productionDetail.brandName}
                    </span>
			    </NavBar>

			    <RightSidebar 
	 				isShowFilter={this.state.isShowFilter}
	 				onClose={() => this.setState({ isShowFilter: false })}
	 				onSearch={this.onSearch}

	 				{...this.props}
	 				/>
	 		</div>
	  	);
	}
};

ProductionNav.propTypes = {
};

export default ProductionNav
